<template>
    <div class="health-assessment">
        <search-condition ref="searchConditionRef" @search="search" @resert="resert" :isShowMoreSeach="false" @selectChange="selectChange"></search-condition>
        <div class="health-assessment-main" ref="healthAssessmentMainRef" :style="{ width: width + 'px' }">
            <template v-if="vibrate.length && strain.length && dip.length">
                <div class="btn" @click="showSensor(item - 1)" v-for="item in 9" :key="item" />
            </template>
            <sensor v-if="isShowSensor" @close="close" ref="sensorRef" :formData="formData" />
        </div>
    </div>
</template>

<script setup>
import searchCondition from "@/components/searchCondition.vue";
import sensor from "./cpn/sensor.vue";
import { formConfig } from "./config.js";
import { reactive, provide, ref, watch, nextTick, onMounted } from "vue";
import { useChangeColor } from "@/hooks/useChangeColor.js";
import { getequipmentarealocationlist } from "@/service/api/equipmentManagement.js";
import { getbasicsequipmentcodelist } from "@/service/api/healthAssessment.js";
import { getbasicsequipmentnamelist, getSensorPointPosition, getStrainSensorObject, getTiltSensorObject } from "@/service/api/faultDetection.js";

const { anotherColor, bgColor } = useChangeColor();
const formData = reactive({ location: "", equipmentCode: "" });
const isShowSensor = ref(false);
const sensorRef = ref(null);
const vibrate = ref([]);
const dip = ref([]);
const width = ref(0);
const strain = ref([]);
const selectChange = (val, name) => {
    if (name !== "equipmentCode") return;
    isShowSensor.value = false;
    getPointFn();
};
function getPointFn() {
    Promise.all([
        getSensorPointPosition({ equipmentCode: formData.equipmentCode }),
        getStrainSensorObject({ equipmentCode: formData.equipmentCode }),
        getTiltSensorObject({ equipmentCode: formData.equipmentCode })
    ]).then((res) => {
        res[0].data.forEach((item) => {
            item.color = "#0065B2";
            item.type = "振动传感器";
            item.isStrain = false;
            item.pattern = 2;
        });
        vibrate.value = res[0].data;
        res[1].data.forEach((item) => {
            item.color = "#FF4D50";
            item.type = "应变传感器";
            item.isStrain = true;
            item.pattern = 3;
        });
        strain.value = res[1].data;
        res[2].data.forEach((item) => {
            item.color = "#FFC53F";
            item.type = "倾角传感器";
            item.isStrain = true;
            item.pattern = 1;
        });
        dip.value = res[2].data;
    });
}

let isOnce = false;
watch(
    () => formData.location,
    (news) => {
        if (isOnce) {
            formData.equipmentCode = "";
            formConfig.value[1].options = [];
            formConfig.value[2].options = [];
            getbasicsequipmentcodelist({ area: news }).then((res) => {
                if (res.code === 200) {
                    formConfig.value[1].options = res.data.map((item) => ({ label: item.name, value: item.value }));
                }
            });
            getbasicsequipmentnamelist({ area: news }).then((res) => {
                if (res.code === 200) {
                    formConfig.value[2].options = res.data.map((item) => ({ label: item.name, value: item.value }));
                }
            });
        }
    }
);
getequipmentarealocationlist().then((res) => {
    if (res.code === 200) {
        formConfig.value[0].options = res.data.map((item) => ({ label: item.name, value: item.value }));
        formData.location = formConfig.value[0].options[0].value;
        isOnce = true;
        getbasicsequipmentcodelist({ area: formData.location }).then((res) => {
            if (res.code === 200) {
                formConfig.value[1].options = res.data.map((item) => ({ label: item.name, value: item.value }));
                formData.equipmentCode = formConfig.value[1].options[0]?.value;
                getPointFn();
            }
        });
        getbasicsequipmentnamelist({ area: formData.location }).then((res) => {
            if (res.code === 200) {
                formConfig.value[2].options = res.data.map((item) => ({ label: item.name, value: item.value }));
            }
        });
    }
});
const showSensor = (index) => {
    //应变 震动 倾角
    let data = [...strain.value, ...dip.value, ...vibrate.value];
    if (!isShowSensor.value) isShowSensor.value = true;
    nextTick(() => {
        sensorRef.value.getData(data[index]);
    });
};
const close = () => {
    isShowSensor.value = !isShowSensor.value;
};
const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};
const search = () => {
    if (!formData.equipmentCode) {
        ElMessage.error("请选择设备");
        return;
    }
    sensorRef.value?.getData();
    showSensor(0);
};
onMounted(() => {
    const el = document.querySelector(".el-main");
    el.style = "background:#000305;";
    const r = 1184 / 635;
    width.value = (el.clientHeight - 92) * r;
});
provide("layout", { xs: 6, sm: 6, md: 6, lg: 6, xl: 6 });
provide("formData", formData);
provide("formConfig", formConfig);
</script>

<style lang="scss" scoped>
.health-assessment {
    height: 100%;
    .resert {
        width: 106px;
        border: 1px solid v-bind(anotherColor);
        color: v-bind(anotherColor);
        background-color: v-bind(bgColor);
    }
    .health-assessment-main {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: calc(100% - 92px);
        background-color: #0e2b3d;
        background: url("@/assets/image/faultDetection/location.png") center/100% 100% no-repeat;
        .btn {
            position: absolute;
            width: 1.35vw;
            height: 1.35vw;
            border-radius: 50%;
            cursor: pointer;
        }
        & > div {
            &:nth-of-type(4) {
                left: 6.5%;
                top: 26.4%;
                background: url("@/assets/image/faultDetection/yellow.png") center/100% no-repeat;
            }
            &:nth-of-type(1) {
                left: 28%;
                top: 26%;
                background: url("@/assets/image/faultDetection/red.png") center/100% no-repeat;
            }
            &:nth-of-type(9) {
                left: 36.5%;
                top: 15%;
                background: url("@/assets/image/faultDetection/blue.png") center/100% no-repeat;
            }
            &:nth-of-type(2) {
                left: 49.5%;
                top: 26%;
                background: url("@/assets/image/faultDetection/red.png") center/100% no-repeat;
            }
            &:nth-of-type(7) {
                left: 62.5%;
                top: 13%;
                background: url("@/assets/image/faultDetection/blue.png") center/100% no-repeat;
            }
            &:nth-of-type(8) {
                left: 64.5%;
                top: 10%;
                background: url("@/assets/image/faultDetection/blue.png") center/100% no-repeat;
            }
            &:nth-of-type(3) {
                left: 70.5%;
                top: 26%;
                background: url("@/assets/image/faultDetection/red.png") center/100% no-repeat;
            }
            &:nth-of-type(6) {
                left: 90.5%;
                top: 30%;
                background: url("@/assets/image/faultDetection/yellow.png") center/100% no-repeat;
            }
            &:nth-of-type(5) {
                left: 91.5%;
                top: 26%;
                background: url("@/assets/image/faultDetection/yellow.png") center/100% no-repeat;
            }
        }
    }
}
</style>
